<template>
  <div class="content">
    <div class="minContent" ref="echarts"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chartInstance: null,
      data: [],
      titleSize: 0,
      currentPage: 1,
      timeId: null,
    };
  },
  mounted() {
    this.init();
    this.getData();
    window.addEventListener("resize", this.widthChange);
    this.widthChange();
  },
  destroyed() {
    window.removeEventListener("resize", this.widthChange);
    clearInterval(this.timeId);
  },
  methods: {
    init() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts, "chalk");
      var initOption = {
        title: {
          text: "▍ 库存和销量分析",
          left: 20,
          top: 20,
        },
      };
      this.chartInstance.setOption(initOption);
      this.chartInstance.on("mouseover", () => {
        clearInterval(this.timeId);
      });
      this.chartInstance.on("mouseout", () => {
        this.startInterTime();
      });
    },
    async getData() {
      const { data: res } = await this.$http.get("stock");
      console.log(res);
      this.data = res;
      this.updateEchart();
      this.startInterTime();
    },
    updateEchart() {
      let positionArr = [
        ["18%", "40%"],
        ["50%", "40%"],
        ["82%", "40%"],
        ["34%", "75%"],
        ["66%", "75%"],
      ];
      let colorArr = [
        ["#4FF778", "#0BA82C"],
        ["#E5DD45", "#E8B11C"],
        ["#E8821C", "#E55445"],
        ["#5052EE", "#AB6EE5"],
        ["#23E5E5", "#2E72BF"],
      ];
      let seriesData = this.data.slice(
        5 * (this.currentPage - 1),
        5 * this.currentPage
      );
      seriesData = seriesData.map((v, index) => {
        return {
          type: "pie",
          hoverAnimation: false,
          data: [
            {
              name: v.name + "\n" + "\n" + v.sales,
              value: v.sales,
              labelLine: {
                show: false,
              },
              label: {
                color: colorArr[index][0],
              },
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: colorArr[index][0],
                  },
                  {
                    offset: 1,
                    color: colorArr[index][1],
                  },
                ]),
              },
            },
            {
              value: v.stock,
              labelLine: {
                show: false,
              },
              itemStyle: {
                color: "#333843",
              },
            },
          ],
          center: positionArr[index],
          radius: [this.titleSize * 1.8, this.titleSize * 2],
          label: {
            position: "center",
            fontSize: this.titleSize / 2,
          },
        };
      });
      // console.log(seriesData);
      const dataOption = {
        series: seriesData,
      };
      this.chartInstance.setOption(dataOption);
    },
    startInterTime() {
      if (this.timeId) {
        clearInterval(this.timeId);
      }
      this.timeId = setInterval(() => {
        this.currentPage++;
        if (this.currentPage > 2) {
          this.currentPage = 1;
        }
        this.updateEchart();
      }, 3000);
    },
    widthChange() {
      this.updateEchart();
      //3. 自适应配置
      this.titleSize = (this.$refs.echarts.offsetWidth / 100) * 3.6;
      const sizeOption = {
        title: {
          textStyle: {
            fontSize: this.titleSize,
          },
        },
      };
      this.chartInstance.setOption(sizeOption);
      this.chartInstance.resize();
    },
  },
};
</script>